<template>
  <el-table :data="dingdanList" style="width: 100%">
    <el-table-column
      fixed
      prop="orderid"
      label="订单号"
      width="180"
      header-align="center"
      align="center"
    />
    <el-table-column prop="name" label="姓名" width="100" />
    <el-table-column prop="city" label="城市" width="100" />
    <el-table-column prop="addressDetail" label="地区" width="100" />
    <el-table-column
      label="图片"
      width="130"
      header-align="center"
      align="center"
    >
      <template #default="scope">
        <img class="img1" :src="scope.row.img1" />
      </template>
    </el-table-column>
    <el-table-column
      prop="proname"
      label="商品简介"
      width="200"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="originprice"
      label="价格"
      width="100"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="discount"
      label="折扣"
      width="100"
      header-align="center"
      align="center"
    />

    <el-table-column
      prop="time"
      label="电话"
      width="150"
      header-align="center"
      align="center"
    />
  </el-table>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import service from "../../../utils/service";
interface IDingdan {
  name: string;
  tel: string;
  province: string;
  city: string;
  county: string;
  addressDetail: string;
  orderid: string; //订单号
  userid: string; //用户
  status: 0;
  proname: string;
  originprice: number;
  img1: string;
  discount: number;
  num: number;
  time: string;
}
let dingdanList = reactive<IDingdan[]>([]);
const getdingdanList = () => {
  service({
    url: "http://118.178.238.19:3001/admin/order/list",
  }).then((res: any) => {
    if (res.data.code === "200") {
      dingdanList.length = 0;
      dingdanList.push(...res.data.data);
    }
  });
};

getdingdanList();
</script>

<style scoped>
.img1 {
  width: 120px;
  height: 120px;
}
</style>